import React from "react";
import role from "@/utils/role";
import admin from "@/utils/admin";
import connect from "../../utils/connect";

/*
    高阶组件(HOC)
    作用:是React中的一种业务逻辑(功能)复用的高级技巧。

    高阶组件也叫高阶函数，它本质上是一个纯函数(相同的输入永远得到相同的输出).
    高阶组件不是React API它只是一种解决代码复用得解决方案

    当使用多个高阶组件进行组件装饰，会出现props丢失的问题.
    解决方案:在封装高阶组件时间,使用"属性继承"

*/
//一、在类组件上使用高阶组件
// @admin
// @role
// class TestHoc extends React.Component{
//     render(){
//         let{role}=this.props
//         console.log('props',this.props);
        // return(
        //     <div>
        //         <h1>测试高阶组件</h1>
        //         {
        //             role==1&&<button>请假</button>
        //         }
        //     </div>
        // )
//     }
// }

//二、在函数式组件使用高阶组件
function fn1() {
    return{
        a:1,
        b:2
    }
}
function fn2() {
    return{
        getList:()=>{},
        login:()=>{},
    }
}
const TestHoc=props=>{
    console.log('props',props)
    return (
        <div>
            <h1>测试高阶组件</h1>
            {
                role == 1 && <button>请假</button>
            }
        </div>
    )
}


export default connect(fn1,fn2)(admin(role(TestHoc)))


//管理系统得权限管理
//1、粗粒度得权限管理:从菜单的级别进行权限设计
//2、细粒度得权限管理：从组建元素得级别进行权限设计